<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>图片轮播图</title>
	</head>
	<style>
		body {
			margin: 0;
			padding: 0;
			background: #222;
		}

		span {
			margin: 0;
			padding: 0;
		}

		.big-box {
			width: 650px;
			height: 400px;
			background-color: #fff;
			margin: 100px auto;
			border-radius: 20px;
			overflow: hidden;
			position: relative;
			box-shadow: 0 0 3pc rgba(0, 0, 0, 0.4);
		}

		.img-box {
			width: 100%;
			height: 100%;
			overflow: hidden;
			object-fit: cover;
		}

		.show-box {
			display: flex;
			height: 100%;
			width: 100%;
			transition: all 0.5s;
		}

		.show-box img {
			float: left;
			min-width: 650px;
			min-height: 400px;
		}


		.arrowhead-box {
			position: absolute;
			top: 40%;
			float: left;
			width: 100%;
			height: 50px;
		}

		.arrowhead-box span {
			float: left;
			display: block;
			width: 60px;
			height: 60px;
			border-radius: 50px;
			background-color: #fff;
			background-position: 6px 14px;
			cursor: pointer;
			opacity: 0.5;
		}

		.arrowhead-box span:nth-child(2) {
			float: right;
			transform: rotate(180deg);
		}

		.arrowhead-box span:hover {
			opacity: 1;
		}

		.swiper-box {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 50px;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.swiper-box span {
			float: left;
			width: 12px;
			height: 12px;
			background-color: white;
			border-radius: 50px;
			margin-left: 10px;
			cursor: pointer;
			transition: all 0.5s ease-out;
		}

		.swiper-box span:nth-child(1) {
			width: 100px;
		}
	</style>

	<body>
		<div id="app">
			<div class="big-box">
				<div class="img-box">
					<div class="show-box"
						:style="{'transform':'translateX('+translate+'px)','transition':tsion?'all 0.5s':'none'}">
						<img v-for='(item,index) in src' :src="item" alt="">
						<img src="https://i.postimg.cc/mgsKJGLw/susu1.jpg" alt="">
					</div>
				</div>
				<div class="arrowhead-box">
					<span @click='last'></span>
					<span @click='next'></span>
				</div>
				<div class="swiper-box" ref="swiper">
					<span v-for='(item,index) in src' @click='swiper(index)'></span>
				</div>
			</div>
		</div>
		<!-- 生产环境版本，优化了尺寸和速度 -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
		<script>
			Vue.config.productionTip = false

			new Vue({
				el: '#app',
				data: {
					src: ['https://i.postimg.cc/mgsKJGLw/susu1.jpg', 'https://i.postimg.cc/mgsKJGLw/susu1.jpg',
						'https://i.postimg.cc/mgsKJGLw/susu1.jpg', 'https://i.postimg.cc/mgsKJGLw/susu1.jpg',
						'https://i.postimg.cc/mgsKJGLw/susu1.jpg', 'https://i.postimg.cc/qRRLS16Q/susu0.jpg',
						'https://i.postimg.cc/qRRLS16Q/susu0.jpg', 'https://i.postimg.cc/qRRLS16Q/susu0.jpg'
					],
					translateX: 0,
					tsion: true
				},
				methods: {
					// 上一张
					last() {
						this.translateX--
						this.tsion = true
						if (this.translateX < 0) {
							setTimeout(() => {
								this.tsion = false
								this.translateX = this.src.length - 1
							}, 500)
						}
					},
					// 下一张
					next() {
						this.translateX++
						this.tsion = true
						if (this.translateX > this.src.length - 1) {
							setTimeout(() => {
								this.tsion = false
								this.translateX = 0
							}, 500)
						}
					},
					swiper(i) {
						this.translateX = i
					}
				},
				mounted() {
					setInterval(() => {
						this.next()
					}, 3000)
				},
				computed: {
					translate() {
						return -(this.translateX + 1) * 650
					}
				},
				watch: {
					translateX: {
						handler(val) {
							let a = this.$refs.swiper.querySelectorAll('span')
							a.forEach(element => {
								element.style.width = '12px'
							});

							if (this.translateX < 0) {
								val = this.src.length - 1
							}
							if (this.translateX > this.src.length - 1) {
								val = 0
							}
							a[val].style.width = '100px'
						},
					}
				}
			})
		</script>
	</body>

</html>
